/**
* @Description: WoShop商城
* @Author: 梧桐
* @Copyright: 武汉一一零七科技有限公司©版权所有
* @Link: www.wo-shop.net
* @Contact: QQ:2487937004
*/
<template>
	<view class="index_class">
		<u-sticky offset-top="0" h5-nav-height="44" z-index="100000000" bg-color="#180433">
			<u-tabs :list="navList" :current="liveSortIndex" @change="changeLiveSort" :show-bar="false"
				:name="'industry_name'" height="70" font-size="32" bg-color="#180433" gutter="20" inactive-color="#d7d6e2"
				active-color="#ffffff"></u-tabs>
		</u-sticky>

		<view class="swipe-banner u-m-t-20 u-m-b-10">
			<u-swiper :list="bannerList" name="ad_pic"  @click="bannerClick" height="280" class="" :effect3d="true" bg-color="transparent" border-radius="18"></u-swiper>
		</view>

		<view class="bigWrap">
			<!--  直播区-->
			<view>
				<view class="recommend-live-wrap">
					<view class="live-title">
						<liveAnimation :isShowBg="true" />
						<h4>{{$t('直播间推荐')}}</h4>
					</view>

					<view gutter="16" class="recommend-live-list">
						<view @click="linkTo(item)" class="anchor-avatar" v-for="(item,index) in recommendLiveRoom"
							:key="index">

							<u-image :src="item.cover" mode="aspectFill" border-radius="8rpx" width="130" height="130"
								shape="squire"></u-image>

							<view class="live-status" v-if="item.status == 1">
								<u-tag class="live-status-tag" color="#fff" border-color="#f94c4c" bg-color="#f94c4c"
									:text="$t('直播中')" size="mini" mode="plain" />
							</view>
							<text>{{item.title}}</text>
						</view>
					</view>
				</view>


				<view class="live-list">
					<u-divider color="#4c4d4e" bg-color="#f4f4f4" fontSize="25rpx" height="55">
						<liveAnimation :isShowBg="true" />
						<h4>{{$t('热门直播')}}</h4>
					</u-divider>
					<!-- 直播间列表样式3 -->
					<block v-for="(item,index) in list" :key="index">
						<liveCard3 @hook:beforeUpdate="$loading" @hook:updated="$hideLoading" :info="item"></liveCard3>
					</block>

					<u-empty :text="$t('暂无数据')" mode="list" icon-size="100" class="empty" v-if="list.length===0"></u-empty>
				</view>
			</view>
		</view>
		<u-loadmore :status="loadStatus" />

		<!--  上新点击展开coverview-->
		<cover-image class="coverView" v-if="false">333</cover-image>


	</view>
</template>

<script>
	let isOpenReachBottom = false
	import liveCard3 from '@/pagesC/live/components/liveCard3'
	import shopItem from '@/components/shop/shopItem'
	import shopperCard from "@/components/shopperCard";
	let sortArray = []
	let cacheMap = new Map();
	export default {
		components: {
			liveCard3, //直播卡片组件3
			shopItem, //关注店铺列表
			shopperCard, //上新card组件
		},
		data() {
			return {
				bannerList: [],
				headList: [],
				navList: [],
				list: [],
				currIndex: 0,
				liveSortIndex: 0,
				currType: 1,
				loadingType: 0,
				headerPosition: 'fixed',
				currentIndex: 3,
				isScrollTop: false,
				page: 1,
				loadStatus: 'loadmore',
				bodyMarginTop: 0,
				isOpenLive: false,
				listCache: {
					name: "直播",
				},
				headerStyle: {
					'position': ""
				},
				cosUrl: '',
				recommendLiveRoom: {}
			}
		},
		// 获取节点信息必须写在 onReady生命周期内
		onReady() {
			const platform = uni.getSystemInfoSync().platform
			const addHieght = platform === 'android' ? 30 : 0

		},
		onLoad(option) {
			this.cosUrl = this.STATICURL
			this.getBannerList()
			this.getLiveSort()
			this.getLiveInfoData()
			this.getRecommendLiveRoom()
			sortArray = new Array(15).fill([])
			this.getFunction()
		},
		onReachBottom() {
			isOpenReachBottom = true //下拉设置 isOpenReachBottom为空， 关闭接口方法中获取cacheMap缓存值
			const cacheData = cacheMap.get(this.listCache)
			this.page = cacheData.page
			let loadStatus = cacheMap.get(this.listCache).loadStatus
			if (loadStatus == 'nomore') return;
			this.page++
			this.loadStatus = 'loading'
			this.getFunction()

		},

		onPullDownRefresh() {

			this.headerStyle.position = 'static'
			isOpenReachBottom = true
			this.page = 1
			this.getFunction()
			this.getRecommendLiveRoom()

		},

		computed: {
			getHeadList() {
				return this.headList.filter(res => res.is_show === 1)
			},

		},

		methods: {
			getBannerList(){
				const data = {
					tag: 'mobile_live_banner'
				}
				this.$http.getAdByTag(data).then(res => {
					if(res.status == 200){
						this.bannerList = res.data
					}
				})
			},
			bannerClick(index){
				let ad = this.bannerList[index];
				if(ad.ad_url != ''){
					this.$u.route({url:ad.ad_url,type:ad.ad_url_type})
				}
			},
			getRecommendLiveRoom() {
				this.$http.getRecommendLiveRoom().then(res => {
					this.recommendLiveRoom = res.data
				})
			},

			getFunction() {

				let obj = this.listCache
				let isHasCacheData = cacheMap.has(obj)
				let cacheData, cacheList;
				if (isHasCacheData) {
					cacheData = cacheMap.get(obj)
					cacheList = cacheData.list
					this.loadStatus = cacheData.loadStatus
				}

				if (isHasCacheData && !isOpenReachBottom) {
					return this.list = cacheList
				}
				this.getLiveVideoList(-1, 0)

			},

			// 动态获取顶部一级分类列表
			getLiveSort() {
				this.$http.getFindCate().then(res => {
					this.headList = res.data.cate_list
				})
			},
			
			getisSendPost() {
				if (cacheMap.has(this.listCache) && !isOpenReachBottom) {
					return false
				}
			},
			getLiveInfoData() {
				this.$http.getLiveNavList().then(res => {
					if (res.status === 200) {
						this.navList = res.data
					}
				})
			},
			


			// 直播分类分类切换
			changeLiveSort(index) {
				this.page = 1
				let cacheList = cacheMap.get(this.listCache).list[index]

				this.liveSortIndex = index;
				// if (this.currIndex === index) return false
				this.currType = this.navList[index].id
				this.isMore = false
				let id = this.navList[index].id
				this.getLiveVideoList(id, index)


			},
			getLiveVideoList(id, index) {


				this.getisSendPost()
				this.$http.getLiveList({
					typeid: id,
					page: this.page
				}).then(res => {
					if (res.status === 200) {
						sortArray[index] = res.data.data
						this.dealApiData('list', sortArray[index])
						console.log(cacheMap)
					}
				})
			},
			getVideoList() {
				this.getisSendPost()

				const data = {
					page: this.page
				}
				this.$http.getVideoList(data).then(res => {
					this.loadStatus = 'loadmore'
					this.dealApiData('flowList', res.data.video_list)
				})
			},
			dealApiData($dataKey, data) {
				uni.stopPullDownRefresh()
				isOpenReachBottom = false //只在下拉onReachBottom中开启    请求成功后 关闭
				if (this.page <= 1) {
					this.$set(this, $dataKey, data)
				} else {
					this[$dataKey] = this[$dataKey].concat(data)
				}
				this.addCacheMap(this[$dataKey]) //缓存列表数据
				if (data.length <= 10) return this.loadStatus = 'nomore'; //如果返回的列表数据小于等于10 ，则判断为没有更多数据
			},
			// map缓存  缓存当前分类对象  数据列表  page值， 避免切换时多次请求和
			addCacheMap(list) {
				cacheMap.set(
					this.listCache, {
						list, //数据
						page: this.page, //分页
						loadStatus: this.loadStatus //触底加载状态
					}
				)
			},
			preView(list, index) {
				uni.previewImage({
					urls: list,
					current: index,

				});
			},
			linkTo(item) {
				const params = {
					shop_id: item.shop_id
				}
				// #ifdef APP-PLUS
				this.$u.route({
					url: '/pagesC/live/Audience',
					params
				})
				// #endif
				// #ifdef  MP-WEIXIN || H5
				this.$u.route({
					url: '/platforms/live-player',
					params
				})
				// #endif
			},

		},


	}
</script>

<style lang="scss" scoped>
	@import '~uview-ui/index.scss';
	
	/* #ifdef H5 */
	uni-page-head .uni-page-head__title {
		color: rgb(253, 102, 102);
	}
	/* #endif */

	.index_class {
		background-color: #F2F2F2;
		margin-top: 0rpx;
	}

	.live-list {
		@include flexbox($jc:center);
		border-radius: 18rpx;
	}

	.sticky {}

	.swipe-banner {
		z-index: 2;
	}

	.recommend-live-wrap {
		margin: 15rpx;
		background: #fff;
		padding: 10rpx;
		border-radius: 18rpx;

		.live-title {
			display: flex;
			color: #4c4d4e;
			padding: 20rpx;
			line-height: 70rpx;
			justify-content: flex-start;
		}
	}



	.anchor-avatar {
		width: 130rpx;
		margin: 5rpx 10rpx;
	}

	.recommend-live-list {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		overflow-x: auto;
		text-align: center;

		text {
			color: #4c4d4e;
			font-size: 25rpx;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			display: block;
		}

		.live-status {
			display: block;
			position: relative;
			width: 130rpx;
			height: 1rpx;

			.live-status-tag {
				position: absolute;
				top: -35rpx;
				left: 0;
				width: 130rpx;
				height: 35rpx;
				font-size: 20rpx;
				line-height: 20rpx;
				background-color: #f94c4c;
				border-radius: 0 0 8rpx 8rpx;
			}
		}
	}

	.room-title {
		display: flex;
		width: 100%;
		line-height: 35rpx;
		margin-bottom: 20rpx;
		padding-left: 20rpx;
	}

	/deep/.animation {
		margin-top: 4rpx;
	}

	.empty {
		width: 100%;
	}
</style>
